<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
	<th:block th:include="include :: header('逸思精品')" />
	<th:block th:include="include :: list-css" />
	<style type="text/css">
		    body{background-color: #f4f4f4 !important;}
           .header{position:fixed;top: 0;width: 100%;background: #fff;z-index: 999;}
		   .headcon{width: 1200px;margin: auto; display: flex;align-items: center;color: #1E9FFF;padding: 30px 0;}
		   .headcon .tit{font-size: 36px;font-weight: 700;}
		   .headcon .search{display: flex;align-items: center;border: 2px solid #1E9FFF;margin-left: 200px;height: 40px;border-radius: 8px;}
		   .headcon .search input{border: none;width: 500px;}
		   .headcon .searchbtn{background: #1E9FFF;width: 100px;text-align: center;height: 40px;color: #fff;line-height: 40px;font-size: 18px;cursor: pointer;border-bottom-right-radius: 5px;border-top-right-radius: 5px;}
	       
		   .goods{background-color: #f4f4f4;padding: 30px 0;min-height: 80vh;}
		   .goodscon{width: 1200px;margin: auto;background-color: #fff;}
		   .goodscon .nodata{text-align: center;padding: 100px;font-size: 18px;color: #888;display: none;}
		   .goodscon .itemlist{display: flex;align-items: center;padding: 20px;border-radius: 10px;flex-wrap: wrap}
		   .goodscon .item{width: 210px;margin: 10px;border: 1px solid #ddd;cursor: pointer;position: relative;}
		   .goodscon .item .zticon{position: absolute;top: 0;left: 0;z-index: 99;width: 50px;height: 50px;}
		   .goodscon .item img{width:210px;height: 	210px;}
		   .goodscon .item .top{position: relative;}
		   .goodscon .item .top div{position: absolute;bottom: 0;right: 0;background: #999;color: #fff;padding: 2px 5px;font-size: 12px;}
		   .goodscon .item .con{padding: 10px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;height: 15px;}
		   .goodscon .item .bom{padding: 10px;display: flex;align-items: flex-end;justify-content: space-between;}
		   .goodscon .item .bom div:nth-child(1){color: #ee5417;}
		   .goodscon .item .bom div:nth-child(2){color: #999;font-size: 12px;position: relative;top: -5px;}
		   .goodscon .item .bom2{padding: 10px;display: flex;align-items: flex-end;justify-content: space-between;}
		   .goodscon .item .bom2 div:nth-child(1){color: #999;font-size: 12px;position: relative;top: -5px;}
		   .goodscon .item .bom2 div:nth-child(2){color: #999;font-size: 12px;position: relative;top: -5px;}
	
	</style>
	
	<!-- 购物车悬浮框 -->
	<style>
		.footer-view{
			box-sizing: border-box;
			width: 70px;
			text-align: center;
			line-height: 70px;
			/* 关键代码 */
			height:80px;
			/* 底部固定关键代码 */
			position: fixed;
			bottom: 20px;
			right: 0;
			margin-right: 300px;
		}
		.footer{
			border: none;
			border-radius: 15px;
			background-color: #27888F;
			opacity: 0.6;
			color: white;
			cursor: pointer;
			width: 70px;
			height: 70px;
			margin: 0 auto;
			font-weight: 600;
			font-size: 20px;
			box-shadow: #D2D8E0 2px 2px 2px 2px ;
		}
		.eKnowAiBtn{
			opacity: 1;
		}
		
		.num_cart{
			position: absolute;
			margin-left: -5px;
			margin-top: -10px;
			font-size: 12px;
			color: #fff;
			background: #ff0000;
			text-align: center;
			box-shadow: 0 0 0 1px #fff;
			border-radius: 10px;
			padding: 0;
			width: 24px;
			height: 24px;
			line-height: 24px;
			display: inline-block;
		}
	</style>
</head>
<body>
	<div class="header">
         <div class="headcon">
              <div class="tit">逸思精品</div>
			  <div class="search">
				   <i class="layui-icon layui-icon-search" style="font-size: 22px; color: #1E9FFF;margin: 0 10px;"></i>  
				   <input type="text" class="code" placeholder="搜索商品"/>
				   <div class="searchbtn" onclick="listpath()">搜 索</div>
			  </div>
		 </div>
	</div>
	<div style="width: 100%;height:110px"></div>
	<div class="goods">
        <div class="goodscon">
			<div class="nodata">
				<img style="width: 200px;height:200px" src="/img/nodata.png" alt="">
				<div>暂无数据</div>
			</div>
			<div class="itemlist"></div>
		</div>
	</div>

	<div class="footer-view">
		<div class="footer" id="eKnowAi" onclick="toCart()">
			<img alt="" src="/img/jingpin/cart.png" width="80%">
			<span id="id_num_cart" class="layui-badge num_cart">[[${numProductOnCart}]]</span>
		</div>
	</div>
	
<th:block th:include="include :: footer" />
<th:block th:include="include :: businessJS" />
<th:block th:include="include :: searchJS" />

<script th:inline="javascript">
	var prefix = ctx + "hr/choiceshop";
	var gridColumns = [[${gridColumns}]]
</script>

<script type="text/javascript">
/*
* 购物车悬浮框鼠标移动效果
*/
$("#eKnowAi").mouseover(function() {
	$("#eKnowAi").addClass("eKnowAiBtn");
});
$("#eKnowAi").mouseout(function() {$("#eKnowAi").removeClass("eKnowAiBtn");});

var limit=50,page=1;
var $,layer,laydate,form,table,wherestr={};
layui.use(['table','laydate','form','layer','jquery','element','laypage'], function () {
	$ = layui.$, layer = layui.layer,laydate = layui.laydate , form = layui.form, table = layui.table, element = layui.element, laypage = layui.laypage;
    var numall=0
	window.listpath=function(){
		page=1
		var code=$('.code').val()
		var data={}
		if(code){
			data={code,limit,page}
		}else{
			data={limit,page}
		}
		$.get(prefix+"/list",data,function(res){
			 var str=''
			 if(res.data.length>0){
				  $('.nodata').hide()
				  $('.itemlist').show()
                  for(var i=0;i<res.data.length;i++){
					// <div>起批量：${res.data[i].pCS}个</div>
					str+=`<div class="item" onclick="path('${res.data[i].code}')">`
					if(res.data[i].vtype=='爆品'){
						str+=`<img class="zticon" src="/img/vtype1.png">`
					}else if(res.data[i].vtype=='新品'){
						str+=`<img class="zticon" src="/img/vtype2.png">`
					}
					str+=`<div class="top">
				    		<img src="${res.data[i].img}">
				    	</div>
				    	<div class="con" title="${res.data[i].name}">${res.data[i].name}</div>
				    	<div class="bom">
				    		<div>￥<span style="font-size: 22px;">${res.data[i].purchasePrice}</span></div>
				    	</div>
				    	<div class="bom2">
				    		<div>库存：${res.data[i].numStock}</div>
				    		<div>
				    			<div>人数：${res.data[i].numBuyer}</div>
				    			<div>销量：${res.data[i].monthlySales}</div>
				    		</div>
				    	</div>
				    </div>`
				  }
			 }else{
				$('.nodata').show()
				$('.itemlist').hide()
			 }
			 numall=res.count
			 $('.itemlist').html(str)
		}); 
	}
	listpath()
	function listpathtwo(){
		var code=$('.code').val()
		var data={}
		if(code){
			data={code,limit,page}
		}else{
			data={limit,page}
		}
		$.get(prefix+"/list",data,function(res){
			 var str=''
			 if(res.data.length>0){
                  for(var i=0;i<res.data.length;i++){
					str+=`<div class="item" onclick="path('${res.data[i].code}')">`
						if(res.data[i].vtype=='爆品'){
					    	str+=`<img class="zticon" src="/img/vtype1.png">`
					    }else if(res.data[i].vtype=='新品'){
					    	str+=`<img class="zticon" src="/img/vtype2.png">`
					    }
					str+=`<div class="top">
				    		<img src="${res.data[i].img}">
				    	</div>
				    	<div class="con" title="${res.data[i].name}">${res.data[i].name}</div>
				    	<div class="bom">
				    		<div>￥<span style="font-size: 22px;">${res.data[i].purchasePrice}</span></div>
				    		<div>销量：${res.data[i].vYxl}</div>
				    	</div>
				    </div>`
				  }
			 }
			 $('.itemlist').append(str)
		}); 
	}

	window.path=function(e){
        window.open("/hr/choiceshop/buy?code="+e, "_blank");
	}

	$(window).scroll(function(){ 
		var scrollTop = $(this).scrollTop(); 
		var scrollHeight = $(document).height(); 
		var windowHeight = $(this).height(); 
		if(scrollTop + windowHeight == scrollHeight){
			if(numall>(page*limit)){
				page=page+1 
			    listpathtwo() 
			}
		} 
	});
	

 });




/*
* 弹出购物车页面
*/
function toCart() {
	layer.open({
		type: 2,
		title: "逸思精品购物车",
		area: ['80%', '80%'],
		content: '/hr/choiceshop/toCart'
	});
}
</script>
</body>
</html>